/* ==========================================================
   Outcomes Page 2 - Section 3: Methodology
   File: wwwroot/css/outcome2-methodology.css
   Used by: Views/Partials/blocklist/Components/outcomeTwoMethodologyBlock.cshtml
   Fluid layout: same scaling as the other Outcome blocks
   (6.8vw gutter, vw sizes with clamp() minimums/maximums).
   ========================================================== */
.roi {
  --roi-navy: #1b2a5b;
  --roi-box: #152662;
  --roi-orange: #ff9a45;
  --roi-text: #1a1a1a;
  --roi-gutter: 6.8vw;                 /* same side space as the other sections */
  --roi-intro-bg: linear-gradient(100deg, #E4E7FB 0%, #F1E8F3 45%, #FDE2CF 100%);
  --roi-ease: cubic-bezier(.65, 0, .35, 1);       /* smooth ease-in-out */
  --roi-ease-out: cubic-bezier(.16, 1, .3, 1);    /* soft settle */
  --roi-speed: .9s;

  width: 100%;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--roi-navy);
  -webkit-font-smoothing: antialiased;
}
.roi *, .roi *::before, .roi *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Intro (top half) ---------- */
.roi__intro {
  background: var(--roi-intro-bg);
  padding: clamp(40px, 4vw, 104px) var(--roi-gutter) clamp(32px, 2.8vw, 72px);
}
.roi__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38.3vw;
  gap: clamp(24px, 2.4vw, 62px) 6vw;
  align-items: start;
}
.roi__text { grid-column: 1; grid-row: 1; }
.roi__subheading-wrap { grid-column: 1; grid-row: 2; }

.roi__eyebrow {
  margin-bottom: clamp(12px, 1.1vw, 28px);
  font-size: clamp(11px, 0.78vw, 20px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--roi-navy);
}
.roi__heading {
  max-width: 34vw;
  margin-bottom: clamp(14px, 1.3vw, 34px);
  font-size: clamp(24px, 2.08vw, 54px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--roi-navy);
}
.roi__lead {
  max-width: 40vw;
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(14px, 0.9vw, 23px);
  line-height: 1.65;
  color: var(--roi-text);
}
.roi__subheading {
  font-size: clamp(18px, 1.46vw, 38px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--roi-navy);
}

/* Formula box (Rich Text: Heading 3 for formulas, paragraph for notes) */
.roi__formula {
  grid-column: 2;
  grid-row: 1 / span 2;
  background: var(--roi-box);
  color: #fff;
  padding: clamp(22px, 1.8vw, 46px) clamp(20px, 1.8vw, 46px) clamp(32px, 3.1vw, 80px);
}
.roi__formula h2,
.roi__formula h3,
.roi__formula h4 {
  margin-bottom: clamp(10px, 0.8vw, 20px);
  font-size: clamp(15px, 1.15vw, 30px);
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}
.roi__formula p {
  margin-bottom: clamp(16px, 1.4vw, 36px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(12px, 0.8vw, 21px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
}
.roi__formula > :last-child { margin-bottom: 0; }

/* ---------- Expanding image panels (bottom half) ---------- */
.roi-panels {
  display: flex;
  height: clamp(420px, 33vw, 860px);
  background: #05070D;
}
.roi-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition: flex-grow var(--roi-speed) var(--roi-ease);
  will-change: flex-grow;
}
.roi-panel + .roi-panel { border-left: 1px solid rgba(255, 255, 255, .06); }
.roi-panel.is-active { flex-grow: 4.6; cursor: default; }
.roi-panel:focus-visible { box-shadow: inset 0 0 0 3px var(--roi-orange); }

.roi-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  filter: brightness(.75) saturate(.85);
  transition: transform 1.6s var(--roi-ease-out), filter var(--roi-speed) var(--roi-ease);
  will-change: transform;
}
.roi-panel.is-active .roi-panel__img { transform: scale(1); filter: none; }

/* Dark overlay so white text is always readable */
.roi-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(4, 7, 16, .92) 0%, rgba(4, 7, 16, .5) 38%, rgba(4, 7, 16, .08) 72%),
    linear-gradient(90deg, rgba(4, 7, 16, .55) 0%, rgba(4, 7, 16, 0) 55%);
  pointer-events: none;
}

.roi-panel__content {
  --roi-icon: clamp(40px, 3.3vw, 86px);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 clamp(16px, 1.7vw, 44px) clamp(28px, 2.6vw, 68px) calc(50% - var(--roi-icon) / 2);
  transition: padding-left var(--roi-speed) var(--roi-ease);
}
/* open panel: text lines up with the page gutter above */
.roi-panel.is-active .roi-panel__content { padding-left: var(--roi-gutter); }

.roi-panel__icon {
  display: grid;
  place-items: center;
  width: var(--roi-icon);
  height: var(--roi-icon);
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--roi-orange);
  transition: background-color .4s ease, transform .5s var(--roi-ease-out);
}
.roi-panel__icon img,
.roi-panel__icon svg { width: 48%; height: 48%; display: block; }
.roi-panel:not(.is-active):hover .roi-panel__icon { background: rgba(255, 255, 255, .34); transform: scale(1.08); }

/* Height-collapsing reveal (grid-rows trick) */
.roi-panel__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--roi-speed) var(--roi-ease);
}
.roi-panel.is-active .roi-panel__reveal { grid-template-rows: 1fr; }
.roi-panel__reveal > div { overflow: hidden; }

.roi-panel__body {
  width: clamp(260px, 21vw, 540px);
  padding-top: clamp(16px, 1.5vw, 38px);
  color: #fff;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
  transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
.roi-panel.is-active .roi-panel__body {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .6s ease .45s, transform .8s var(--roi-ease-out) .45s, filter .6s ease .45s;
}
/* stagger the lines inside the text */
.roi-panel__body > * { transition: opacity .25s ease, transform .25s ease; }
.roi-panel:not(.is-active) .roi-panel__body > * { opacity: 0; transform: translateY(10px); }
.roi-panel.is-active .roi-panel__body > * { transition: opacity .6s ease, transform .8s var(--roi-ease-out); }
.roi-panel.is-active .roi-panel__body > :nth-child(1) { transition-delay: .45s; }
.roi-panel.is-active .roi-panel__body > :nth-child(2) { transition-delay: .55s; }
.roi-panel.is-active .roi-panel__body > :nth-child(3) { transition-delay: .62s; }
.roi-panel.is-active .roi-panel__body > :nth-child(4) { transition-delay: .68s; }

.roi-panel__title {
  margin-bottom: clamp(10px, 0.8vw, 20px);
  font-size: clamp(16px, 1.25vw, 32px);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.roi-panel__desc,
.roi-panel__when {
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, 0.9vw, 23px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
}
.roi-panel__rule {
  height: 1px;
  margin: clamp(12px, 1vw, 26px) 0;
  border: 0;
  background: rgba(255, 255, 255, .35);
}

/* ---------- SMALL LAPTOP / TABLET ---------- */
@media (max-width: 1200px) {
  .roi { --roi-gutter: 32px; }
  .roi__container { grid-template-columns: minmax(0, 1fr) minmax(320px, 44%); gap: 24px 40px; }
  .roi__heading, .roi__lead { max-width: none; }
}

/* ---------- TABLET PORTRAIT & MOBILE: stack ---------- */
@media (max-width: 900px) {
  .roi { --roi-gutter: 24px; }
  .roi__intro { padding-top: 48px; padding-bottom: 36px; }
  .roi__container { grid-template-columns: 1fr; }
  .roi__text, .roi__subheading-wrap, .roi__formula { grid-column: 1; grid-row: auto; }
  .roi__subheading-wrap { order: 3; }
  .roi__heading, .roi__lead { max-width: 680px; }

  .roi-panels { flex-direction: column; height: auto; }
  .roi-panel { flex: none; min-height: 340px; cursor: default; }
  .roi-panel + .roi-panel { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
  .roi-panel__img { transform: none; filter: none; }
  .roi-panel__content,
  .roi-panel.is-active .roi-panel__content { padding: 0 var(--roi-gutter) 28px; }
  .roi-panel__reveal { grid-template-rows: 1fr; }
  .roi-panel__body,
  .roi-panel:not(.is-active) .roi-panel__body > * { opacity: 1; transform: none; filter: none; }
  .roi-panel__body { width: auto; max-width: 420px; }
}

@media (max-width: 560px) {
  .roi { --roi-gutter: 20px; }
  .roi__heading { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .roi-panel, .roi-panel__img, .roi-panel__content, .roi-panel__reveal,
  .roi-panel__body, .roi-panel__body > *, .roi-panel__icon { transition: none !important; transition-delay: 0s !important; }
}